import './App.scss';
import React, { useState, useEffect } from 'react';
import { Button, Layout, Menu, Breadcrumb, theme, Image, Item } from 'antd'
import routes from '../src/routers/routes'
import { useRoutes, useNavigate, Outlet, NavLink } from 'react-router-dom'
import { AmazonCircleFilled } from '@ant-design/icons'
import Login from '../src/page/user/user'
const { Header, Sider, Content } = Layout



function App() {

  //获取cookie
  const getCookie = (name) => {
    const cookies = document.cookie.split(';'); // 将document.cookie分割成数组  
    for (let i = 0; i < cookies.length; i++) { // 遍历每个cookie项  
      const cookie = cookies[i].trim(); // 去除每个cookie项两端的空格  
      if (cookie.startsWith(name + '=')) { // 如果该cookie项以指定的名称开头  
        return cookie.substring(name.length + 1, cookie.length); // 返回该cookie项的值  
      }
    }
    return null; // 如果未找到指定的cookie，则返回null或默认值（可选）  
  };

  let element = useRoutes(routes)
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  const [navpath, setNavpath] = useState('')
  const [selectedKeys, setSelectedKeys] = useState(['defaultSelectedKey']);
  let newrouters = routes.filter((items) => items.islogin === 1)
  let LpfuseName = localStorage.getItem('LPFdenglu')
  let loginName=getCookie("lpfLongin")
  const onClick = (e) => {
    if (loginName) {
      let path = e.keyPath.reverse().join('/')
      setSelectedKeys([path])
      setNavpath(path)
      navigate(path)
    } else {
      alert('您的登录已过期，请重新登录！！！')
      navigate('/user')
    }
  }


  return (
    <div className="App">
         <Layout id='layoutBox'>
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <div className="leftTitle"><p>雾外江山</p></div>
          <Menu theme="dark" selectedKeys={selectedKeys} onClick={onClick} mode="inline" items={newrouters} />
        </Sider>

        <Layout>
          <Header className='herder' style={{ background: '#ccc' }}>
            <div className="herdercont">
              <div style={{ margin: '16px 0', fontFamily: '900', display: 'flex', alignItems: 'center' }}>

                <h3>Welcome to </h3>
                {
                  navpath !== '' ? <p className='itemPath' >{navpath}</p> : ''
                }
                <button className='itemQuit'>退出</button>
              </div>
            </div>
          </Header>
          <Content className='conBox'>
            {element}
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;
